<template>
  <div>
    <el-table :data="tableData">
      <el-table-column prop="id" label="编号"/>
      <el-table-column prop="cardNum" label="卡号"/>
      <el-table-column prop="allCount" label="总金额"/>
      <el-table-column prop="borrowCount" label="已借金额"/>
      <el-table-column>
        <template v-slot="scope">
          <el-button
              type="primary"
              :disabled="scope.row.borrowCount === 0"
              @click="state.reBackMoney(scope.row)"
          >
            还款
          </el-button>
          <el-button
              type="primary"
              :disabled="scope.row.borrowCount === scope.row.allCount"
              @click="state.borrowMoney(scope.row)"
          >
            取现
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog v-model="dialogVisible" title="取现">
      <span>
        <el-form :model="ArCreditCard">
          <h4>转入账户:</h4>
          <el-form-item
              label="收款方"
              prop="realName"
              :rules="[
              { required: true, message: '银行卡持卡人姓名', trigger: 'blur' },
              {
                pattern: /^[\u4e00-\u9fa5]+$/,
                message: '请输入中文',
                trigger: 'blur',
              },
            ]"
          >
            <el-input
                v-model="ArCreditCard.realName"
                placeholder="请输入真实姓名"
                style="width: 300px"
            ></el-input>
          </el-form-item>
          <el-form-item label="银行卡号" prop="iden">
            <el-input
                v-model="ArCreditCard.iden"
                @blur="state.cardNumIsRightOrNot"
                placeholder="输入银行卡号"
                style="width: 300px"
            ></el-input>
          </el-form-item>
          <el-form-item
              label="提现金额"
              prop="money"
              :rules="[
              { required: true, message: '金额不能为空', trigger: 'blur' },
            ]"
          >
            <el-input
                v-model="ArCreditCard.money"
                placeholder="请输入金额"
                @blur="calThePayRice"
                style="width: 300px"
            ></el-input>
          </el-form-item>
          <h4 style="color: #f16b41">所需缴纳手续费:{{ payRice }}元</h4>
          <h4 style="color: #409eff">取现所需缴纳手续费为当笔取现资金的1%，该笔资金会在信用卡可借余额中扣除。</h4>
        </el-form>
      </span>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="state.submitTheMsg">
            提交
          </el-button>
        </div>
      </template>
    </el-dialog>

    <el-dialog v-model="dialogBackVisible" title="还款">
      <span>
        <el-form :model="ArCreditCard">
          <el-form-item
              label="姓名"
              prop="realName"
              :rules="[
              { required: true, message: '请输入真实姓名', trigger: 'blur' },
              {
                pattern: /^[\u4e00-\u9fa5]+$/,
                message: '请输入中文',
                trigger: 'blur',
              },
            ]"
          >
            <el-input
                v-model="ArCreditCard.realName"
                placeholder="请输入姓名"
                style="width: 300px"
            ></el-input>
          </el-form-item>
          <el-form-item label="转出账户" prop="iden">
            <el-input
                v-model="ArCreditCard.iden"
                @blur="state.cardNumIsRightOrNot"
                placeholder="输入银行卡号"
                style="width: 300px"
            ></el-input>
          </el-form-item>
          <el-form-item
              label="还款金额"
              prop="money"
              :rules="[
              { required: true, message: '金额不能为空', trigger: 'blur' },
            ]"
          >
            <el-input
                v-model="ArCreditCard.money"
                placeholder="请输入金额"
                style="width: 300px"
            ></el-input>
          </el-form-item>
        </el-form>
      </span>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="state.submitTheBackMsg">
            提交
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import {
  BorrowMoney,
  GetBankCardByCardNum,
  GetCreditCardList,
  ReBackMoney,
} from '@/api/creditCard'
import {defineComponent, onMounted, reactive, ref} from 'vue'
import {ElMessage} from 'element-plus'

const dialogVisible = ref(false)
const dialogBackVisible = ref(false)
const tableData = ref([])
const flag = ref(false)
const moneyMid = ref(0)
const ArCreditCard = ref({
  //银行卡号
  bid: '',
  //信用卡号
  cid: '',
  //真实姓名
  realName: '',
  //操作金额
  money: '',
  //无关字段
  iden: '',
})
const payRice = ref(0)
const currentCard = ref({
  id: '',
})

function calThePayRice() {
  payRice.value = Number(ArCreditCard.value.money) * 0.01
  console.log(payRice.value)
}

const state = {
  getTableDate: async () => {
    const {data} = await GetCreditCardList()
    console.log(data)
    tableData.value = data.records
    console.log(tableData.value)
  },
  borrowMoney: async data => {
    console.log('取现时的data-------->')
    console.log(data)
    currentCard.value.id = data.id
    ArCreditCard.value = {}
    dialogVisible.value = true
  },
  reBackMoney: async data => {
    currentCard.value.id = data.id
    ArCreditCard.value = {}
    dialogBackVisible.value = true
  },
  cardNumIsRightOrNot: async () => {
    const {data, code, message} = await GetBankCardByCardNum(
        ArCreditCard.value.iden
    )
    console.log('银行卡的data')
    console.log(data)
    if (code === 200) {
      ArCreditCard.value.bid = data.cid
    } else {
      ElMessage.error(message)
      flag.value = false
    }
  },
  //取现
  submitTheMsg: async () => {
    ArCreditCard.value.cid = currentCard.value.id
    console.log("还款操作")
    console.log(ArCreditCard.value)
    const {data, code, message} = await BorrowMoney(ArCreditCard.value)
    if (code === 200) {
      ElMessage.success(data)
      await state.getTableDate()
      dialogVisible.value = false
    } else {
      ElMessage.error(data)
    }
    ArCreditCard.value = {}
    payRice.value = null
    moneyMid.value = null
  },
  //还款
  submitTheBackMsg: async () => {
    ArCreditCard.value.cid = currentCard.value.id
    console.log("还款操作")
    console.log(ArCreditCard.value)
    const {data, code, message} = await ReBackMoney(ArCreditCard.value)
    if (code === 200) {
      ElMessage.success(message)
      await state.getTableDate()
      dialogBackVisible.value = false
    } else {
      ElMessage.error(data)
    }
    ArCreditCard.value = {}
    payRice.value = null
    moneyMid.value = null
  },
}

onMounted(() => {
  state.getTableDate()
})
</script>

<style scoped></style>
